<template>
		<div id="WeekAnnals">
		<Row>
			<Col span="4">
				<div class="Carousel">
				 <Carousel v-model="value" loop arrow=always dots=none @on-change="getIndex">
					<CarouselItem v-for="item in month">
						<div class="demo-carousel">{{item}}月</div>
					</CarouselItem>
				 </Carousel>
				</div>
				<div class="Timeline">
				 <Timeline>
					<TimelineItem v-for="(Timeline,index) in Timelines"
					:key="index">
					<el-tooltip always  placement="right-end" content="点击~" effect="light">
					<a class="Timelinelable" @click="Creat(Timeline.value)">
              		第{{Timeline.lable}}周
              		</a>
					</el-tooltip>
					</TimelineItem>
				 </Timeline>
				</div>
			</Col>

			<Col offset="2" span="12">
				<div class="table">
					<el-row style="padding:4px">
						<el-col>
							<h1 >任务周志</h1>
						</el-col>
					</el-row>
					<el-row >
						<div class="tableRow">
						<Form ref="tableConntent" :model="tableConntent" :rules="ruleTable">
							<el-row>
								<el-col :span="11">
								  <div>
									<FormItem prop="name" label="拟制人：" class="ivu-from-item" :label-width="100" >
									  <Input readonly type="text" v-model="tableConntent.name">
									  </Input>
									</FormItem>
									<FormItem prop="supervisor" label="任务主管：" class="ivu-from-item" :label-width="100" >
									  <Input :readonly="Readonly" type="text" v-model="tableConntent.supervisor">
									  </Input>
									</FormItem>
								  </div>
								</el-col>
								<el-col  :span="11">
								  <div>
									<FormItem prop="week" label="任务周数：" class="ivu-from-item" :label-width="100" >
									  <Input readonly type="text" v-model="tableConntent.week">
									  </Input>
									</FormItem>
									<FormItem prop="update_time" label="提交日期：" class="ivu-from-item" :label-width="100" >
									<Input readonly type="text" v-model="tableConntent.update_time">
									  </Input>
									  <!-- <DatePicker type="date" placeholder="选择日期" v-model="tableConntent.update_time">
									  </DatePicker> -->
									</FormItem>
								  </div>
								</el-col>
							</el-row>
							<p class="P"><font color="red">*</font>本周任务及完成情况</p>
							<div>
							    <FormItem prop="task">
									<Input :readonly="Readonly" class="textArea" v-model="tableConntent.task" 
									type="textarea" 
									:autosize="{minRows:5,maxRows: 6}" 
									@on-focus= "ariseNum()" @on-enter="raiseNum()"
									placeholder="ヽ(✿ﾟ▽ﾟ)ノ任务完成情况【必填】且不可超过500字！">
									</Input>
								</FormItem>
							</div>
							<p class="P">备注||其他</p>
							<div>
								<FormItem prop="remark">
									<Input :readonly="Readonly" class="textArea" v-model="tableConntent.remark" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="ヽ(✿ﾟ▽ﾟ)ノ请输入~"></Input>
								</FormItem>
							</div>
							<p class="P">主管评分</p>
							<div>
								<FormItem prop="scoring" :rules="ruleTable">
									<Input :disabled="Disabled" class="textArea" v-model="tableConntent.scoring" type="textarea" :autosize="{minRows: 5,maxRows: 5}" :placeholder="ScoringTip"></Input>
								</FormItem>
							</div>
						</Form>
							<Button @click="handleReset('tableConntent')" style="width:20%;margin-left: 80px;text-algin:center;" :disabled="!Is_cheack">
							{{HandleReset}}
							</Button>
							<Button @click="handleSubmit('tableConntent')" style="width:20%;margin-left: 100px;text-algin:center" :disabled="!Is_cheack">
							{{HandleSubmit}}
							</Button>
						</div>
					</el-row>
				</div>
			</Col>

				<Col offset="1" span="5">
					<div class="CardP">
					<h4 style="margin-left: 15px">第{{Week}}周任务提交情况：</h4>
					<el-progress :stroke-width="17" :percentage="SubmissionRate"></el-progress>
					<div style="margin-top: 10px">
					<Card>
						<p slot="title">
						<font class="title">第{{Week}}周</font>
						拟制人：{{tableConntent.name}}
						</p>
						<Input readonly v-model="tableConntent.task" type="textarea" :rows="2"></Input>
						<a @click="showDetails()">查看更多...</a>
					</Card>
					<div>
						<Page @on-change="getPage" :total="40" size="small" style="margin-left: 23%"></Page >
						<!-- <Button @click="handleMinus()" style="width:25%;margin:10px;text-algin:center" icon="arrow-left-b"></Button>
						<Button @click="handlePlus()" style="width:25%;margin:10px;margin-left: 90px; text-algin:center"icon="arrow-right-b"></Button> -->
					</div>
					</div>
					</div>
				</Col>

			</Row>
	</div>
</template>
<script>
	import {postDataToServer} from '../../assets/js/post.js'
	export default{
		name:'WeekAnnals',
		data(){
			const validateTask = (rule, value, callback) => {
				if(value){//value为空undefine null false ''时连函数都不能进！
					if (value === '1、') {
						callback(new Error('任务完成情况不能为空（ ￣ー￣）...'));
					}else if (value.length>1000) {
						callback(new Error('任务完成情况不可超过500字(๑•̀ㅂ•́)و✧！'));
					}
					else
					{
						callback();
					}
				}
				else{
					callback(new Error('任务完成情况不能为空（ ￣ー￣）...'));
				}
			};
			return{
				Data_Status:0,
				date:'',
				month:12,
				getyear:'',
				getmonth:'',
				ID:'',
				TOTAL:30,
				Disabled:false,
				// charge:1,
				HandleSubmit:'提交',
				HandleReset:'重置',
				Is_cheack:true,
				Readonly:false,
				i:1,
				value:0,
				Week:'一',//最右边一列
				is_submited:'',//是否首次提交
				WEEK:'',//日期判断得到
				weeklyList:{},
				ScoringTip:'',
				listNumber:3,//
				tableConntent:{
					name:'name',
					week:'',//tablecontent的内容
					supervisor:'',
					update_time:'',
					task:'',
					remark:'',
					scoring:'',
					is_cheack:0
				},
				Timelines:[{
					lable:'一',
					value:'1'
				},
				{	lable:'二',
					value:'2'
				},{
					lable:'三',
					value:'3'
				},{
					lable:'四',
					value:'4'
				},{
					lable:'五',
					value:'5'
				}],
				Carousels:[
				{
					lable:'',
				}],
				SubmissionRate:77,
				 ruleTable: {
                    supervisor: [
                        { required: true, message: '不能为空(ˉ▽￣～)...', trigger: 'blur' }
                    ],
                    task: [
                        { validator: validateTask,trigger: 'blur' },
                    ]
                },
			}
		},
		created(){
		// 	let params = new Object();
		// 						let parameter = new Object();
		// 						params.url = "WEEKLY_ADD";
		// 						parameter = this.tableConntent;
		// 						parameter.month = 1;//this.getmonth;
		// 						parameter.week = 4;//this.WEEK;
		// 						parameter.year = 2017;//this.getyear;
		// 						params.parameter = parameter;
		// 						postDataToServer(params).then((data)=>{
		// 							console.log(data)
		// 							if(data.status === 0){
		// 								this.$Message.success('新增成功╰(￣▽￣)╭ ！~');
		// 							}else{
		// 								this.$Message.error('新增失败╥﹏╥...');
		// 							}
		// 						});
			this.JudgeRole();
			this.JudgeTime();
			this.getHomecontent();
			this.getList();
		},
		methods:{
			getList(){
				let params = new Object;
				let parameter = new Object;
				params.url = "WEEKLY_LISTPAGE";
				parameter.month = this.getmonth;
				parameter.year = this.getyear;
				parameter.week = this.WEEK;
				params.parameter = parameter;
				postDataToServer(params).then((data)=>{
					this.weeklyList = data;
				});
			},
			getHomecontent(){
				let params = new Object;
				let parameter = new Object;
				params.url = "WEEKLY_GET";
				parameter.year = this.getyear;
				parameter.month = this.getmonth;
			    parameter.name = 'name';//登陆时获取登录者姓名
  				parameter.week = this.WEEK;
				params.parameter = parameter;
  				postDataToServer(params).then((data)=>{
  					if(data.status === 0){
  						this.Data_Status = data.status 
  						if(data.data){
  							this.tableConntent = data.data;
  							this.ID = data.data.id;
  							this.is_submited = true;
  						}else{
  							this.is_submited = false;
  						}
  					}else{
  						this.$Message.error('数据获取失败╥﹏╥...');
  					}
  				});
			},
			handleSubmit (name) {
				if(this.Data_Status === 0){
					this.$refs[name].validate((valid) => {
						if (valid) {
							if(!this.is_submited){
								let params = new Object();
								let parameter = new Object();
								params.url = "WEEKLY_ADD";
								parameter = this.tableConntent;
								parameter.month = this.getmonth;
								parameter.week = this.WEEK;
								parameter.year = this.getyear;
								params.parameter = parameter;
								postDataToServer(params).then((data)=>{
									if(data.status === 0){
										this.$Message.success('新增成功╰(￣▽￣)╭ ！~');
									}else{
										this.$Message.error('新增失败╥﹏╥...');
									}
								});
							}
							else{
								let params = new Object;
								let parameter = new Object;
								params.url = "WEEKLY_EDIT"
								parameter = this.tableConntent;
								parameter.month = this.getmonth;
								parameter.week = this.WEEK;
								parameter.year = this.getyear;
								parameter.id = this.ID;
								params.parameter = parameter;
								postDataToServer(params).then((data)=>{
									if(data.status === 0){
										this.$Message.success('编辑成功╰(￣▽￣)╭ ！~');
									}else{
										this.$Message.error('编辑失败╥﹏╥...');
									}
								})
							}
						}else{
							this.$refs[name].validate((valid) => {
								this.$Message.error('校验失败╥﹏╥...');
							})
						}
					})
				}else{
					this.$Message.error('数据获取失败╥﹏╥...')
				}
			},
			handleReset(name){
				var name = this.tableConntent.name;
				var week = this.tableConntent.week;
				for (var i in this.tableConntent) {
					this.tableConntent[i]='';
				}
				this.tableConntent.name = name;
				this.tableConntent.week = week;
			},
			showDetails(){
				this.HandleReset = '清空';
				this.HandleSubmit = '保存';
				if (this.charge===1) {
					this.Readonly = true;
				}else{
					if (this.tableConntent.is_cheack==1) {
						this.Is_cheack = false;
					}
				}
			},
			// getSubmissionRate(){
			// 	let params = new Object();
			// 	params.url="WEEKLY_EDIT";
			// 	postDataToServer(params).then((data)=>{
			// 		})
			// },
			ariseNum(){
				if (this.tableConntent.task==='') {
					this.tableConntent.task= '1、'+this.tableConntent.task
				}
			},
			raiseNum(){
				this.i++;
				this.tableConntent.task =this.tableConntent.task+this.i+'、';
			},
			getPage(){},
			getIndex(oldvalue,value){
				let params = new Object();
				params.url="WEEKLY_GET";
				let parameter = new Object();
				parameter.month = value+1;
				parameter.year = this.getyear;
				parameter.name = this.tableConntent.name;
				parameter.week = this.WEEK;
				params.parameter = parameter;
				postDataToServer(params).then((data)=>{
				})

			},
			Creat(Timeline){
				this.Week=Timeline;
				let params = new Object();
				let parameter = new Object();
				params.url = "WEEKLY_GET";
				parameter.month = this.getmonth;
				parameter.year = this.getyear;
				parameter.name = this.tableConntent.name;
				parameter.week = Timeline;
				params.parameter = parameter;
				postDataToServer(params).then((data)=>{
					
            	});
			},
			JudgeRole(){
				
				if (this.charge===1) {
					this.ScoringTip = "ヽ(✿ﾟ▽ﾟ)ノ请输入~";
					this.listNumber = 3;
				}
				else{
					this.listNumber = 1;
					this.Disabled = true;
					if(this.tableConntent.is_cheack==0) {
						this.ScoringTip = "等待审核ヽ(✿ﾟ▽ﾟ)ノ~";
					}
					else{
						this.Readonly = true;
						this.ScoringTip = "审核完成ヽ(✿ﾟ▽ﾟ)ノ~";
						this.Is_cheack = false;
					}	
				}

			},
			JudgeTime(){
				var myDate = new Date();
				this.date = myDate.toLocaleDateString();
			    this.getyear =  myDate.getFullYear();
			    this.getmonth = myDate.getMonth()+1;
			    this.value =  myDate.getMonth();
				var getWeek = myDate.getDate()/7;
				if (getWeek<=1) {
					this.WEEK = '1';
				}else if (getWeek<=2) {
					this.WEEK = '2';
				}else if (getWeek<=3) {
					this.WEEK = '3';
				}else if (getWeek<=4) {
					this.WEEK = '4';
				}else{
					this.WEEK = '5';
				}
				this.tableConntent.week = this.WEEK;
				this.tableConntent.update_time = this.date;
			}
			}
		}
	</script>
	<style scoped="scoped">
		.table
		{
			border-radius: 7px;
			width:100%;
			height: 100%;
			background-color: rgba(255,255,255,0.6);
			border:1px dashed #5FA6F1;
		}
		.tableRow{
			padding-left: 50px;
			padding-right: 30px;
			padding-bottom: 10px;
		}
		.time.label{
        font-size: 14px;
        font-weight: bold;
		}
		.title{
			color: #5FA6F1;
			font-size: 20px;
		}
		.Timelinelable{
			font-size: 20px;
			font-family: "madscrwl";
		}
		.Carousel{
			margin-top: 35px;
			width: 230px;
			background-color: rgba(255, 255, 255,0.1);
			border-radius: 7px;
			margin-left: 50px;
			/*height: 60px*/
		}
		.demo-carousel{
			margin-top: -20px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			font-family: "madscrwl";
			/*margin-left: 60px;*/
			font-size: 25px;
		}
		.Timeline{
			margin-left: 118px;
			margin-top: 100px;
		}
		#WeekAnnals{
			background-image: url(../../../static/img/31.jpg);
			background-size: 95%;
			/*opacity:0.8;*/
		}
		.CardP{
			margin-right: 10px;
			/*margin-left: 40px;*/
			background-color: rgba(255,255,255,0.1);
			margin-top: 35px;
			margin-bottom: 24px;
			border-radius: 7px;
		}
		.textArea{
			width: 100%;
			margin-left: -10px;
			line-height: 10px;
		}
		h1{
			text-align: center;
			font-family: "madscrwl";
			margin-bottom: 0px;
		}
		.P{
			font-size: 15px;
			text-align: center;
			font-family: "madscrwl";
		}
		.ivu-from-item{
			margin-top: -6px;
		}
	</style>